<template>
	<div>
		<Grid :col="1" :border="false" padding="5px" v-auth:role:view:add>
			<GridItem><Button icon="md-add-circle" type="primary" @click="drawer = true;this.title='新增角色'">新增角色</Button></GridItem>
		</Grid>
		 <!-- 引入表格 -->
		 <Table border :columns="columns" :data="data" row-key="id">
			
			<template #action="{ row, index }">
				<Button type="success" size="small" style="margin-right: 5px" v-auth:role:view:permission
                :disabled="row.built" @click="showPermission(row)">分配权限</Button>
				<Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px"
                v-auth:role:view:modify
                :disabled="row.built" @click="show(row)">修改</Button>
				<Button type="error" icon="ios-remove-circle-outline" v-auth:role:view:remove
						size="small" :disabled="row.built" @click="remove(row)">移除</Button>
			</template>
			
			<template #status="{ row, index }">
				<DotTag type="primary" v-if="row.status">正常</DotTag>
				<DotTag type="error" v-else>失效</DotTag>
			</template>

			<template #name="{row}">
        <Tag color="primary" v-if="row.defaultRole">默认</Tag>
				<strong>{{row.name}}</strong>

			</template>
			
		 </Table>
		 
		 <Modal v-model="permissionWin" title="分配权限" v-if="permissionWin">
		 	  <PremissionForm ref="permission" :role-id="roleId"></PremissionForm>
			  <template #footer>
				  <Button type="default" @click="this.permissionWin = false">关闭</Button>
				  <Button :icon="treeBtn.icon" type="info" @click="treeNode">{{treeBtn.text}}</Button>
				  <Button type="primary" @click="savePermission">确定</Button>
			  </template>
		 </Modal>
		 
		
		<Drawer
			:title="title"
			v-model="drawer" v-if="drawer"
      @on-close="closeWin"
			width="720"
			:mask-closable="false"
			:styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
        <RoleForm @close-win="closeWin" :row="roleRow"></RoleForm>
		</Drawer>
		
	</div>
</template>
<script>
	import RoleForm from '../components/RoleForm.vue'
	import PremissionForm from '../components/PremissionForm.vue'
	import DotTag from '../components/DotTag.vue'
    export default {
        data () {
            return {
              drawer: false,
              title: '',
              roleRow: {},
              permissionWin: false,
              roleId: null ,
              treeBtnIndex: 0 ,
				      treeBtnList: [
					      {icon: 'md-add-circle' , text: "全部选中" },
					      {icon: 'ios-remove-circle' , text: "全部取消" },
				      ],
              columns: [
                {type: 'index', width: 60},
                {title: '角色名', slot: 'name', tree: true},
                {title: '角色标识',key: 'remark'},
                {title: '角色描述',key: 'description'},
                {title: '状态',key: 'status', slot: 'status', width: 100},
                {title: '操作',slot: 'action',width: 280,align: 'center'}
              ],
              data: [],
            }
        },
        created(){
           this.showData();
        },
        methods: {
            closeWin(flag) {
              if (flag) this.showData();
              this.drawer = false ;
              this.roleRow = {} ;
            },
            showData() {
               this.$api.queryRoles().then(({data:ret})=> {
                  if (ret.status === "10000") {
                    this.data = ret.data ;
                  }
               });
            },
            show (row) {
              this.title = '修改角色'
              this.drawer = true ;
              this.roleRow = {id: row.id, name: row.name, remark: row.remark, description: row.description, status: row.status, defaultRole: row.defaultRole} ;
            },
            remove (row) {
              this.$Modal.confirm({
                title: '提示',
                content: `您确定要删除该角色吗?`,
                onOk: () => {
                  // 负责 调用接口、完成 菜单状态的修改
                  this.$api.removeRole(row.id).then(({data: ret}) => {
                    if (ret.status === "10000") {
                      this.$Message.success({background: true, content: "数据删除成功"});
                      this.showData();
                    } else {
                      this.$Message.error({background: true, content: ret.message});
                    }
                  })
                }
              })
            },
            showPermission(row) {
              this.permissionWin = true ;
              this.roleId = row.id ;
            },
            savePermission() {
                // 获取 所有被勾选的节点（半节点）
               let treeNodes = this.$refs.permission.$refs.tree.getCheckedAndIndeterminateNodes();
                // 映射下数据、获取所有节点ID
               let treeIds = treeNodes.map(tree => tree.id) ;
                // console.log(treeIds);
               // 调用接口、完成 权限分配
                this.$api.bindRolePermission(this.roleId, treeIds).then(({data:ret})=> {
                   if (ret.status === "10000") {
                     this.$Message.success({background: true, content: "权限绑定操作成功"});
                     this.permissionWin = false ;
                     this.roleId = null;
                   }else{
                     this.$Message.error({background: true, content: ret.message});
                   }
                })
            },
            treeNode() {
              // 实现 全选 获取 取消
              this.$refs.permission.selectOrCancelAllNodes( this.treeBtnIndex++ % 2 == 0) ;
            }
        },
        components: {
          RoleForm,
          PremissionForm,
          DotTag,
        },
        computed : {
          treeBtn() {
            return this.treeBtnList[this.treeBtnIndex % 2] ;
          }
        }
    }
</script>

